<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .top {
            position: relative;
            left: 0;
            right: 0;
        }

        .four {
            display: flex;
            /* align-items: center; */
            margin-top: 100px;
        }

        .left {
            margin-left: 350px;
        }

        .right {
            display: flex;
            flex-direction: column;
            width: 600px;
        }

        .si {
            font-family: Consolas;
            font-size: 7.5em;
            font-weight: bold;
        }

        .er {
            font-family: Consolas;
            margin-top: -80px;
        }

        .home {
            font-family: Wingdings;
            border: none;
            background: #fff;
            width: 164px;
            height: 48px;
            padding: 8px 50px;
            font-weight: bold;
            font-size: 1em;
            letter-spacing: 2px;
            margin: 5px 0;
            transition: 0.2s ease;
            border: 4px solid #2ccf6d;
            border-radius: 30px;
            cursor: pointer;
            outline: none;
            font-family: Consolas;
        }

        .home:hover {
            color: #fff;
            background: #2ccf6d;
            transition: 0.2s ease;
        }

        .burger,
        .close {
            position: relative;
            top: 30px;
            left: 30px;
            width: 30px;
            height: 22px;
            border: none;
            background: none;
            cursor: pointer;
            outline: none;
        }

        .span1 {
            position: absolute;
            height: 3px;
            background: #000;
            width: 100%;
            left: 0;
            top: 0;
        }

        .span2 {
            position: absolute;
            height: 3px;
            background: #000;
            width: 100%;
            left: 0;
            top: 9px;
        }

        .span3 {
            position: absolute;
            height: 3px;
            background: #000;
            width: 100%;
            left: 0;
            top: 18px;
        }

        .view {
            position: absolute;
            width: 0;
            height: 900px;
            background: #2ccf6d;
            left: 0;
            right: 0;
        }

        .homes {
            margin-top: 100px;
        }

        .services {
            margin-top: 140px;
        }

        .about {
            margin-top: 180px;
        }

        .contant {
            margin-top: 220px;
        }

        .move {
            position: absolute;
            left: -300px;
            margin-left: 30px;
            font-size: 25px;
            font-weight: bold;
            cursor: pointer;
        }

        .view p:hover {
            color: #fff;
        }
    </style>
</head>

<body>
<div class="top">
    <div class="view">
        <p class="homes move" onclick="window.location.href='/sports'">Home</p>
        <p class="about move"
           onclick="window.location.href='https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/404'">About</p>
    </div>
    <button class="burger">
        <span class="span1"></span>
        <span class="span2"></span>
        <span class="span3"></span>
    </button>
    <div class="four">
        <img src="/sports/static/images/img/404/404.png" class="left">
        <div class="right">
            <h1 class="si">404</h1>
            <h2 class="er">UH OH! You're lost.</h2>
            <p width style="font-family: 'Yu Gothic'">
                The page you are looking for does not exist.
                How you got here is a mystery. But you can click the button below
                to go back to the homepage.
            </p>
            <button class="home" onclick="window.location.href='/sports'">HOME</button>
        </div>
    </div>
</div>

<script>
    let view = document.querySelector(".view")
    let burger = document.querySelector(".burger")
    let close = document.querySelector(".close")
    let span1 = document.querySelector(".span1")
    let span2 = document.querySelector(".span2")
    let span3 = document.querySelector(".span3")
    let move = document.querySelector(".move")
    let about = document.querySelector(".about")
    burger.addEventListener("click", function () {
        var width = view.offsetWidth;
        if (width == 0) {
            view.style = "width:300px;transition: 1s ease;"
            span1.style = "transform:rotate(45deg);top:10px;transition: 0.2s ease;"
            span2.style = "display:none"
            span3.style = "transform:rotate(-45deg);top:10px;transition: 0.2s ease;"
            move.style = "left:0px;transition: 1s ease;"
            about.style = "left:0px;transition: 1s ease;"
        } else {
            view.style = "left:0;transition: 1s ease;"
            span1.style = "transform:rotate(0deg);top:20px;transition: 0.2s ease;"
            span2.style = "display:block"
            span3.style = "transform:rotate(0deg);top:0px;transition: 0.2s ease;"
            move.style = "left:-300px;transition: 1s ease;"
            about.style = "left:-300px;transition: 1s ease;"
        }
    }, true);
</script>
</body>

</html>